<!-- 散点图 https://echarts.apache.org/examples/zh/editor.html?c=scatter-simple -->
<template>
    <div class="chart-container2">
      <div ref="chart" class="chart2"></div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    name: 'EchartsComponent',
    props: {
      data: {
        type: Array,
        required: true
      }
    },
    mounted() {
      this.renderChart();
    },
    watch: {
    data: {
      handler() {
        this.renderChart();
      },
      deep: true,
    },
  },
    methods: {
      renderChart() {
        const chartDom = this.$refs.chart;
      const myChart = echarts.init(chartDom, "");
        
        const option = {
          xAxis: {},
          yAxis: {},
          series: [
            {
              symbolSize: 4,
              data: this.transformData(),
              type: 'scatter'
            }
          ]
        };
        
        myChart.setOption(option);
      },
      transformData() {
        return this.data.map(item => [item.diff, item.utiliz * 100]);
      }
    }
  };
  </script>
  
  <style>
  #chart {
    width: 100%;
    height: 300px;
  }
  </style>
  